import React from 'react';
import { useRouter } from 'next/router';

const Start = () => {
  const router = useRouter();
  const onStartClick = () => {
    router.replace('/docs/payments/01_overview/01_overview_en');
  };
  return (
    <div className="start">
      <div className="container">
        {/* 主要文档部分 */}
        <section className="mainSection">
          <h1 className="title">Documentation</h1>
          <p className="subtitle">
            Explore our guides and examples to integrate TOMS OpenAPI.
          </p>

          <div className="buttons">
            <button className="primaryButton" onClick={onStartClick}>
              Get started with payments
            </button>
            {/* <a href="#" className="secondaryButton">
              Explore all products
            </a> */}
          </div>
        </section>
        {/* 三列布局部分 */}
        <div className="columns">
          <div className="column">
            <h2>No-code</h2>
            <ul>
              <li>
                <a href="#">Sell and get paid online</a>
              </li>
              <li>
                <a href="#">Invoice clients and customers</a>
              </li>
              <li>
                <a href="#">Set up recurring payments</a>
              </li>
            </ul>
          </div>

          <div className="column">
            <h2>TOMS hosted</h2>
            <ul>
              <li>
                <a href="#">Use a prebuilt checkout page</a>
              </li>
              <li>
                <a href="#">Set up the customer portal</a>
              </li>
              <li>
                <a href="#">Create pricing table</a>
              </li>
            </ul>
          </div>

          <div className="column">
            <h2>For developers</h2>
            <ul>
              <li>
                <a href="#">API reference</a>
              </li>
              <li>
                <a href="#">Development quickstart</a>
              </li>
              <li>
                <a href="#">Browse our sample projects</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <style jsx>{`
        .start {
          // max-width: 1200px;
          // margin: 0 auto;
          // padding: 60px;
          height: 100vh;
          position: relative;
          // z-index: 1;
        }

        .start::before {
          content: '';
          position: absolute;
          top: -100px;
          left: 0;
          right: 0;
          height: 100vh;
          background: linear-gradient(
            180deg,
            rgba(99, 91, 255, 0.9) 0%,
            rgba(75, 66, 245, 0.8) 25%,
            rgba(75, 66, 245, 0.7) 50%,
            rgba(75, 66, 245, 0.6) 75%,
            rgba(43, 29, 232, 0.5) 100%
          );
          // transform: skewY(-6deg);
          z-index: -1;
        }
        .mainSection {
          margin-bottom: 60px;
        }

        .container {
          min-width: 1280px;
          // margin: 0 auto;
          padding: 48px 25% 0px 25%;
        }

        /* 由于背景变淡，标题颜色可以稍微加深一点，确保可读性 */
        .title {
          font-size: 2.5rem;
          margin-bottom: 16px;
          color: #ffffff;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .subtitle {
          font-size: 1.25rem;
          color: rgba(255, 255, 255, 0.95);
          margin-bottom: 32px;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .buttons {
          display: flex;
          gap: 16px;
          margin-bottom: 64px;
        }

        .primaryButton {
          background-color: white;
          color: 635bff;
          padding: 12px 24px;
          border-radius: 16px;
          border: none;
          cursor: pointer;
          font-size: 16px;
        }

        .secondaryButton {
          color: #635bff;
          text-decoration: none;
          padding: 12px 0;
        }

        .columns {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
          margin-top: 48px;
        }

        .column h2 {
          font-size: 1.5rem;
          margin-bottom: 24px;
          color: #1a1f36;
        }

        .column ul {
          list-style: none;
          padding: 0;
        }

        .column li {
          margin-bottom: 16px;
        }

        .column a {
          color: white;
          text-decoration: none;
        }

        .column a:hover {
          text-decoration: underline;
        }
      `}</style>
    </div>
  );
};

export default Start;
